大家好，我是讀哲學讀到寫 Web 的 Parker ，到現在約有兩年左右的開發經驗，遙想當初真的是完完全全從 0 開始，在這過程中，除了 HTML、CSS、JS 和前端框架這些技術上的硬知識外，網頁開發中的各種潛規則跟慣例也讓我很苦惱，往往都是先亂寫一陣子後，偶然看到一些文章或是跟人聊一聊才突然想通。

其中苦惱我很久的就是網頁畫面中各式各樣的 UI 元件，剛開始寫網頁根本不知道什麼是 Input、Select、Radio 和 Checkbox，更不用說其他更複雜的元件了。

而今年年初時剛好跟著公司開發了一套開源的前端元件函式庫(React-Based），在開發過程中，除了基本的 UI 元件實作之外，也對 Design System、元件們的依賴關係、網頁中有哪些元件，和 開發架構 等等都有了更深的理解。

因此透過這系列，希望初踏入網頁開發領域的讀者們能對 UI 元件有基礎的認識和架構，而已經有開發經驗的讀者們能更理解 UI 元件在網頁中所扮演的角色 ，並注意更多開發上的一些小細節。

最後因為我本身都是用 React 開發，以下有關實作的部分都會使用 React 來闡述，若使用其他框架的人也不用擔心，就算有 React 的語法差異，也還有挺多觀念都是可以互通的！

開始前快速測試一下自己

在這趟旅程開始之前，這邊有些問題可以讓你來判斷一下這系列對你有沒有幫助！

1. 你知道 為什麼會有 UI Library
2. 你知道 MVC、MVVM 等軟體架構，也知道 UI 元件在其中的定位
3. 你知道 Design System，平常在開發時也有應用
4. 你知道 網頁中所有的 UI 元件 以及 各自的使用情境
5. 你知道 UI 元件分成哪些類別，以及 區分的標準
6. 你知道 UI 元件之間的依賴關係
7. 你知道 如何針對各個 UI 元件進行單元測試

如果以上有哪個問題還不太清楚的話，那麼這系列就一定能幫助到你，如果都知道的話也歡迎討論，看看自己的理解跟我有什麼差異！

系列內容

這系列總共會分成「行前說明」、「Design System」、「UML」和「實戰開發」四個章節。

行前說明 （Day 01 ～ Day 05)

首先為了確保大家的起跑線一致，不會有人因為先備知識不足而掉隊，這五天會講關於 UI 元件所需知道的基本概念，也歡迎大家隨時在留言處幫我補充或修正！如果還是有讀者看不懂或疑惑的話也務必留言讓我知道！

Day 01 - 行前說明 — 關於 UI 元件你所該知道的事

Day 02 - 行前說明 — 網頁微切版架構 和 UI 元件

Day 03 - 行前說明 — 在 MVC & MVVM 的 UI 元件

Day 04 - 行前說明 — 元件化開發 與 開發流程

Day 05 - 行前說明 — UI 元件分類你知多少？

Design System （Day 06 ～ Day 11)

如果說一個網站有很一致性、美觀和體驗良好的 UI，那它背後一定也有一套不錯的 Design System。
但相信不少前端工程師還是對於這個概念感到陌生，或是覺得這是設計師才要會的東西。
如果你符合以上其中一種情境，那 Day 06 和 Day 07 完全就是為你而寫的！
而 Day 08 ~ Day 11 則是會提到在所有 UI 元件之前，網頁中最底層的一些系統設置（主視覺、文字、圖標和動畫）和它們的實作。

Day 06 - Design System — 為什麼前端工程師也該知道它？

Day 07 - Design System — 前端工程師也該知道的那些事

Day 08 - Design System x 實作 — Color System

Day 09 - Design System x 實作 — Typography

Day 10 - Design System x 實作 — Icon

Day 11 - Design System x 實作 — Motion

UML （Day 12 ～ Day 20)

前面講過了 UI 元件的分類，也講完了 UI 的設計系統，這一章要講的就是在工程上，是如何去組織這些元件，我將透過 UML 帶讀者去理解各個 UI 元件們之間的關係，不論是要開發大型系統還是小網站，理解這些關係相信能讓你的開發流程更順，知道該從哪些輪子（UI 元件）開始造起，同時也能帶大家看過一輪網頁中會有的 UI 元件們！

Day 12 - 系統設計不可不知的 UML

Day 13 - UML x Interface — Transition

Day 14 - UML x Interface — Portal

Day 15 - UML x Interface — Notifier

Day 16 - UML x Interface — TextField

Day 17 - UML x Interface — FormControl

Day 18 - UML x Component — Button

Day 19 - UML x Component — Independent（上）

Day 20 - UML x Component — Independent（下）

實戰開發 （Day 21 ～ Day 30)

接下來已經沒什麼好說的了，觀念都講完了，可不能君子只動口不動手呢！
最後一章主要就是把 UML 介紹的介面跟元件實作出來，再加上幾個我認為挺有趣的來實作，而沒包涵到的相信大家看完這些也大概能知道實作的流程跟該思考的一些方向了！
但比起實作這些 UI Component，這系列最精華的其實就在前面介紹的 Design System 和 UML 了，畢竟這些實作只是在提供一些方向跟一種作法而已，要不要這樣實作和需要的功能都還是看當下使用情境的！

Day 21 - 實戰演練 — Button / ButtonGroup / IconButton

Day 22 - 實戰演練 — Portal 系列

Day 23 - 實戰演練 — TextField

Day 24 - 實戰演練 — FormControl

Day 25 - 實戰演練 — Input

Day 26 - 實戰演練 — Notifier、Notification

Day 27 - 實戰演練 — Tabs

Day 28 - 實戰演練 — Pagination

Day 29 - 實戰演練 — 為元件加上單元測試吧！

Day 30 - 結語 — 首尾呼應 & 致謝

小結

最後來說說我對這系列的期許跟定位，對自己來說整理自己之前實作 UI 元件庫的經驗，認為在過程中自己收穫良多，多到可以整理出 30 篇文章的程度；而對別人來說，就如同開頭所說，希望讓大家對網頁中的 UI 元件有一個更全面的理解，先別急著下去開發，有個脈絡跟架構下去寫才夠順。

因此，這系列著重的會是對 網頁中 UI 元件的理解，想看實作的讀者們可能會不太滿足，但是如果是想對網頁中的 UI 元件們有個完整的理解，相信不會讓你們失望的（希望啦）！

但老實說我的資歷也還真的很淺，過程中也挺怕有誤導大家的地方，到時候希望大神們可以不吝賜教、指點迷津，也希望大家可以跟我一起走完這趟旅程，在這過程中多多交流、一起成長！

今天第一天就先這樣囉！希望不要第一天就讓各位讀者們想棄追了?

那就明天見囉！